<template>
    <el-tree class="tree" :data="list" node-key="commentId" :props="defaultProps" :default-expand-all="true"
        :expand-on-click-node="true" :indent="32">
        <template #default="{ node, data }">
            <el-row class="custom-tree-node">
                <el-col :span="1">
                    <el-avatar :src="data.userPhoto" :size="40"></el-avatar>
                </el-col>
                <el-col :span="15" style="line-height: 25px;margin-left: 10px;">
                    <div style="display: flex;">
                        <el-text style="font-weight: bold;">{{ data.userName }}</el-text>
                        <el-tag v-if="data.userId === plant.userId" style="margin-left: 5px;"
                            size="small">作者</el-tag>
                        <el-text style="margin-left: 15px;">{{ formatterDate(data.createTime) }}</el-text>
                    </div>
                    <div style="width: 650px;">
                        <el-text tag="p" style="color: #000;">{{
                            data.commentContent }}</el-text>
                    </div>
                    <el-link v-if="commentState === '0'" @click.stop="showComment(data.commentId)">回复</el-link>
                    <template v-else-if="commentState === data.commentId">
                        <el-input @click.stop v-model="commentForm.commentContent" :autosize="{ minRows: 2, maxRows: 4 }"
                            type="textarea" placeholder="请发表友善评论" />
                        <div style="display: flex;margin-top: 5px;margin-left: 5px;">
                            <el-button @click.stop="addComment(data)" type="primary">发表</el-button>
                            <el-button @click.stop="closeComment">取消</el-button>
                        </div>
                    </template>
                </el-col>
                <!-- <el-col :span="8"></el-col> -->
            </el-row>
        </template>
    </el-tree>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRequest } from 'vue-request';
import { usePlantCommentApi, useSaveCommentApi, useUserCommentApi } from '@/api/comment/comment'
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import store from '@/stores';
import { omit } from 'lodash';
import { usePlantDetailApi } from '@/api/plant/plant';

const props = defineProps(['plantId'])

const router = useRouter()
const route = useRoute()

interface CommentVo {
    commentId: string,
    commentContent: string,
    plantId: string,
    parentId: string | null,
    rootId: string | null,
    createTime: any,
    userId: string,
    userName: string,
    userPhoto: string,
    child: CommentVo[]
}

const commentForm = reactive({
    plantId: "",
    userId: "",
    commentContent: "",
    parentId: "",
    rootId: ""
})

const commentState = ref('0')

const list = ref()
const plant = ref({
    userId:''
})


const query = async () => {
    const { data } = await usePlantCommentApi(props.plantId)
    list.value = data
}

onMounted(async () => {
    query()
    const {data:temp} = await usePlantDetailApi(props.plantId)
    plant.value = temp
})


const defaultProps = {
    label: 'commentContent',
    children: 'child',
}

const showComment = (commentId: string) => {
    if (store.useUserStore.user.userId) {
        commentState.value = commentId
    } else {
        ElMessage({
            type: 'warning',
            message: '请先登录'
        })
    }
}
const closeComment = () => {
    commentState.value = '0'
    commentForm.commentContent = ""
}
const addComment = async (data: any) => {
    if (!store.useUserStore.user.userId) {
        ElMessage({
            type: 'warning',
            message: '请先登录'
        })
        return false
    }

    commentForm.rootId = data.rootId
    commentForm.userId = store.useUserStore.user.userId
    commentForm.parentId = data.commentId
    commentForm.plantId = props.plantId

    await useSaveCommentApi(commentForm).then(() => {
        ElMessage({
            type: 'success',
            message: '评论成功'
        })
        closeComment()
        query()
    })


}

const formatterDate = (val: string) => {
    let newDateObj = new Date(val)
    let year = newDateObj.getFullYear()
    let month: string | number = newDateObj.getMonth() + 1
    let day: string | number = newDateObj.getDate()
    let hh: string | number = newDateObj.getHours()
    let mm: string | number = newDateObj.getMinutes()
    let ss: string | number = newDateObj.getSeconds()
    month = month > 9 ? month : '0' + month
    day = day > 9 ? day : '0' + day
    hh = hh > 9 ? hh : '0' + hh
    mm = mm > 9 ? mm : '0' + mm
    ss = ss > 9 ? ss : '0' + ss
    return `${year}/${month}/${day} ${hh}:${mm}:${ss}`
}

</script>

<style scoped lang="scss">
.custom-tree-node {
    width: 100%;
    padding: 10px;

}

.tree {
    :deep(.el-tree-node__content) {
        height: 100%;
    }

    :deep(.el-tree-node) {
        white-space: normal;
    }
}
</style>